<template>
	<view>

		<!-- 套餐2 -->
		<view class="headInformation">
			<!-- 签到悬浮 -->
			<image @click="signFn()" class="signImg" src="../../static/会员卡yi/微信图片_20240320154546.png" mode="">
			</image>
			<view class="backgroundColor">
				<!-- 头像信息 -->
				<view class="headformation flex-between">
					<view class="flex" v-if="userInfo">
						<image class="avater" :src="userInfo.avatar" mode=""></image>
						<view style="margin-left: 10rpx; " class="flex-column-start"  @click="modifyAvaterInfo()">
							<view style="color:rgb(229, 193, 135);;font-size: 32rpx;margin-bottom: 8rpx;">
								{{ userInfo.nickname}}
							</view>
							<view class="memberType">
								{{userInfo.level_name}}
							</view>
						</view>
					</view>
					<view class="flex">
						<view class="membershipCode" @click="memberCard()">
							<image class="codeImage" src="../../static/会员卡首页1/组合 2.png" mode=""></image>
							<view style="color: #fff;margin-top: 10rpx;">
								会员码
							</view>
						</view>
						<view class="membershipCode" @click.stop="rechargeFn()">
							<image class="rechargeImage" src="../../static/会员卡首页2/组合 329.png" mode=""></image>
							<view style="color: #fff; ">
								充值
							</view>
						</view>
					</view>

				</view>

				<!-- 会员进度条 -->
				<pro-gress :list="Steps" :packageType="packageTypes" :StepInfo="StepInfos"></pro-gress>

				<view class="myOrderCard">

					<view class="flex-wrap-justifyBetween" style="margin-top: 20rpx;">
						<block v-for="(item, i) in menuNavigationList" :key="i">
							<view class="flex-column ">
								<image class="avaterIcon" :src="item.icon" mode=""></image>
								<view class="rightContent">
									<view class="authorizationTitle">{{ item.name }}</view>
								</view>
								<view class="rightContent">
									<view class="secondAuthorizationTitle">{{ item.desc }}</view>
								</view>
							</view>
					
						</block>
					</view>


				</view>



			</view>

			<view class="flex indexBottomContianer ">
				<!-- 头部箭头 -->
				<image class="arrowUp" src="../../static/会员卡首页2/Group 3460.png" mode=""></image>
				<view>

					<!-- 数据明细 -->
					<view class="flex-around dataDetails">
						<view class="flex-column" v-for="(item,i) in dataDetails" :key="i">
							<view style="color:rgb(53, 55, 71);font-size: 36rpx;font-weight: 600;margin-bottom: 10rpx;">
								{{totelName(item.number)}}
							</view>
							<view style="color: rgb(102, 102, 102);font-size: 24rpx;">
								{{item.text}}
							</view>
						</view>

					</view>
					<!-- 我的订单 -->
					<view class="myOrderCard">
						<view class="flex-between myOrder myOrderBorder ">
							<text style="font-size: 30rpx;font-weight: 600;">我的订单</text>
							<text @click="checkAllOrderFn()">查看全部<uni-icons type="right" size="14" color='rgb(153, 153, 153)'></uni-icons></text>
						</view>
						<view class="flex-wrap-justifyAround" style="margin-top: 20rpx;">
							<block v-for="(item, i) in orderList" :key="i">
								<view class="flex-column " @click="checkOrderFn(item)">
									<image class="avaterIcon" :src="item.img" mode=""></image>
									<view class="rightContent">
										<view class="authorizationTitle">{{ item.text }}</view>
									</view>
								</view>

							</block>
						</view>


					</view>
					<!-- 其他配置 -->
					<!-- @click="scanFn()" -->
					<view class="myOrderCard">
						<view class=" myOrder ">
							<text class="rectangle"></text>
							<text style="font-size: 30rpx;font-weight: 600;">常用工具</text>

						</view>
						<view class="flex-wrap-flex-start" style="margin-top: 20rpx;">
							<block v-for="(item, i) in otherNavigationList" :key="i">
								<view class="flex-column infoBox" @click="navTo(item)">
									<image class="avaterIcon" :src="item.img" mode=""></image>
									<view class="rightContent">
										<view class="authorizationTitle">{{ item.text }}</view>
									</view>
								</view>

							</block>
						</view>


					</view>
					<!-- 轮播图 -->

					<view class="carouselChart">
						<liu-slide-img :heightNumber="190" :list="list" :autoplay="autoplay" :interval="interval"
							@change="change" @click="click"></liu-slide-img>
					</view>
					<view style="padding: 30rpx 0 50rpx 0;" class=" flex-column">
						<!-- <image class="companyIcon margin-bottom_10rpx" :src="getConfig.gongzonghao_icon" mode=""></image> -->
						<text style="color: #666666">{{getConfig.skill_name}}</text>
					</view>
				</view>
			</view>
		</view>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class=" gzhCard">
					<view style="text-align: center;" class="margin-top_100rpx">
						余额变动、商城订单状态、会员日、 消息、及时推送信息等等
						<image class="qrcode" :src="getConfig.gongzonghao_qr_code" mode=""></image>
						<view class="font-weight_bold">
							关注公众号 享受更好服务
						</view>
					</view>






				</view>

			</template>
		</sunui-popup>
		<sunui-popup ref="myPackagePopups">
			<template v-slot:content>
		
				<view class="backgroundImg" :style="{ '--bg-image': `url(${getConfig.distribution_poster})` }">
					
		
					<image class="qrcode" :src="userInfo.invite_url" mode=""></image>
		
		
		
		
				</view>
		
			</template>
		</sunui-popup>

	</view>
</template>

<script>
	import TabBar from '../../components/jinjie-tabbar/jinjie-tabbar.vue'
	import proGress from '@/components/progress/progress.vue';
	export default {
		components: {
			TabBar,
			proGress
		},
		props: {

			// 多模版table列表展示
			tabListNum: {
				type: Number,
				default: 1
			}
		},
		data() {

			return {
				packageTypes:2,
				tabIndex: 0,
				StepInfos: {
					
				},
				Steps: [],
				// menuNavigationList: [{
				// 		img: '../../static/会员卡首页2/组合 320.png',
				// 		text: '商城折扣',
				// 		type: 0,
				// 		secondText: '等级高,折扣大'
				// 		// url: '/pages/statistics/index/index'
				// 	},
				// 	{
				// 		img: '../../static/会员卡首页2/组合 312.png',
				// 		text: '特权奖励',
				// 		secondText: '最高100优惠券',
				// 		// url: '/pages/merchantConfiguration/merchantConfiguration',
				// 		type: 9
				// 	},
				// 	{
				// 		img: '../../static/会员卡首页2/组合 322.png',
				// 		text: '生日福利',
				// 		type: 10,
				// 		secondText: '20元无门槛券',
				// 		// url: '/pages/withdrawal/withdrawa-account/withdrawa-account'
				// 	},
				// 	{
				// 		img: '../../static/会员卡首页2/组合 323.png',
				// 		text: '升级礼包',
				// 		type: 11,
				// 		secondText: '升级奖999券',
				// 		// url: '/pages/service-area/service-area'
				// 	},

				// ],
				menuNavigationList: [],
				orderList: [{
						img: '../../static/会员卡首页1/组合 311.png',
						text: '待支付',
						index: 1
						// url: '/pages/statistics/index/index'
					},
					{
						img: '../../static/会员卡首页1/组合 310.png',
						text: '待发货',
						// url: '/pages/merchantConfiguration/merchantConfiguration',
						index: 2
					},
					{
						img: '../../static/会员卡首页1/组合 309.png',
						text: '待收货',
						index: 3
						// url: '/pages/withdrawal/withdrawa-account/withdrawa-account'
					},
					{
						img: '../../static/会员卡首页1/组合 308.png',
						text: '已完成',
						index: 5
						// url: '/pages/service-area/service-area'
					},
				
				],
				// 数据明细
				dataDetails: [{
						number: 3.00,
						text: '我的余额'
					},
					{
						number: 3.00,
						text: '我的卡券'
					},
					{
						number: 18000,
						text: '套餐卡'
					},
					{
						number: 1568,
						text: '我的积分'
					},
				],
				// 其他配置
				otherNavigationList: [
					// {
					// 	img: '../../static/会员卡首页2/组合 308.png',
					// 	text: '充值中心',

					// 	url: '/pages/voucherCenter/voucherCenter'
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 309.png',
					// 	text: '分销中心',
					// 	url: '/pages/distribution/distribution',

					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 310.png',
					// 	text: '优惠券',

					// 	url: '/pages/couponPage/couponPage'
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 311.png',
					// 	text: '个人信息',

					// 	url: '/pages/improveInformation/improveInformation'
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 317.png',
					// 	text: '收支记录',

					//     url: '/pages/revenueRecords/revenueRecords'
					// },

					// {
					// 	img: '../../static/会员卡首页2/组合 318.png',
					// 	text: '充值记录',

					// 	url: '/pages/revenueRecords/revenueRecords'
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 319.png',
					// 	text: '套餐卡',

					// 	url: '/pages/packageCard/packageCard'
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 312.png',
					// 	text: '推广海报',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 316.png',
					// 	text: '提现记录',

					// 	url: '/pages/distribution/distributionRecords/distributionRecords'
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 315.png',
					// 	text: '我的团队',

					// 	url: '/pages/distribution/myFans/myFans'
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 367.png',
					// 	text: '地址管理',

					// 	url: '/pages/addressManagement/addressManagement'
						
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 314.png',
					// 	text: '在线客服',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 486.png',
					// 	text: '进入后台',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 936.png',
					// 	text: '关注公众号',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页2/组合 994.png',
					// 	text: '领券中心',
					
					// 	url: '/pages/couponCenter/couponCenter'
					// },

				],
				// 轮播图
				list: [{
						src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg"
					},
					{
						src: "https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg"
					},
					{
						src: "https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png"
					}
				],
				autoplay: true,
				interval: 5000,
				token: uni.getStorageSync('login').token,
				userInfo:null,
				getConfig:null,
			

			}
		},
		onLaunch() {
			//隐藏官方的tabBar
			uni.hideTabBar()
		},
		onLoad() {
			console.log('page Show')
		},
		onShow: function() {

			console.log('page Show')
		},
		computed: {
			totelName: function() {
				return function(num) {

					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						
						return String(num);
					}
				};
			}
		},
		mounted() {
			this.init()
		},
		updated() {
			
		},
		methods: {
			modifyAvaterInfo(){
				this.$sun.navGo('/pages/improveInformation/improveInformation',{...this.userInfo});
			},
			rechargeFn(){
				this.$sun.navGo('/pages/voucherCenter/voucherCenter')
			},
			async init() {
			    const resq = await this.$http.post({
			    		url: this.$api.getConfig,
			    		data: {
			    			
			    		},
			    		headers: {
			    			'Authorization': `Bearer ${this.token}`
			    		}
			    
			    	})
			    if(resq.code==0){
			    	this.getConfig=resq.data
			    	
			    }
				// 获取会员权益
				const res = await this.$http.post({
					url: this.$api.module,
					data: {
						type: 2,
						template_id:2
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
			
				})
				
				
				console.log(res)
				if (res.code == 0) {
					console.log(res)
			
			
			
			
					this.$sun.toast(res.msg, 'none')
					this.menuNavigationList = res.data
			
				} else {
			
					this.$sun.toast(res.msg, 'none')
				}
				// 修改权益自定义tab'
			
				const resTool = await this.$http.post({
					url: this.$api.module,
					data: {
						type: 1
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
							
				})
				
						
				console.log(resTool)
				if (resTool.code == 0) {
					console.log(resTool)
				
					this.otherNavigationList = resTool.data.map((item)=>{
						return {
						img:item.icon,
						text:item.name,
						url:item.link,
						id:item.id,
						fixed_name:item.fixed_name
						
					}
					})
							
				} else {
							
					this.$sun.toast(resTool.msg, 'none')
				}
				const result = await this.$http.post({
					url: this.$api.userLevel,
					data: {
				
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
				
				})
				console.log(result)
				// 获取等级列表
				if (result.code == 0) {
					console.log(result)
					// dataDetails
			
					this.Steps = result.data.map((item) => {
						return {
							p_price: item.name,
							p_number: item.id
						}
					})
			
					// 这里需要根据login id来判断当前是在什么等级
					let level_id = uni.getStorageSync('login').level_id
			
					const index = this.Steps.findIndex((item) => {
						return item.p_number == level_id
					})
			
					console.log('index', index)
					// StepInfos: {
					// 	// 0 33 66 99
					// 	Current: 66, //百分比（先传条数即可）
					// 	Sum: 4 //共多少步骤(Number类型)
					// },
			
					let dd = (100 / (Number(this.Steps.length) - 1)) * index;
					console.log(dd)
					this.StepInfos = {
						// 0 33 66 99
						Current: dd, //百分比（先传条数即可）
						Sum: this.Steps.length //共多少步骤(Number类型)
					}
					console.log(this.StepInfos)
			
			
			
			
					this.$sun.toast(result.msg, 'none')
			
			
				} else {
			
					this.$sun.toast(result.msg, 'none')
				}
				// 轮播图
			
				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {
			           type:1
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
			
				})
			
				if (resPoster.code == 0) {
			
			
			
					console.log(resPoster.data)
					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分
					
					this.list=resPoster.data.filter(item => item.type === 1);
			
					// this.$sun.toast(resPoster.msg, 'none')
			
			
				} else {
			
					this.$sun.toast(resPoster.msg, 'none')
				}
				// 获取用户信息
				
				const ress = await this.$http.post({
					url: this.$api.userinfo,
					data: {
						  id:uni.getStorageSync('userId'),
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
							
				})
			
				if (ress.code == 0) {
				
							
							
							
					
					this.userInfo = ress.data
					
					this.dataDetails.forEach((item) => {
						switch (item.text) {
							case '我的余额':
								item.number = ress.data.balance;
								break;
							case '我的卡券':
								item.number = ress.data.coupon_num;
								break;
							case '套餐卡':
								item.number = ress.data.package_num;
								break;
							case '我的积分':
								item.number = ress.data.surplus_integral?ress.data.surplus_integral:ress.data.integral;
									break;
								// 可根据实际情况继续添加其他匹配条件
						}
					})
					console.log(this.dataDetails)
							
				} else {
							
					this.$sun.toast(ress.msg, 'none')
				}
			
			},
			change() {

			},
			memberCard(){
				this.$sun.navGo('/pages/qRCodePayment/qRCodePayment')
			},
			scanFns(item) {
				console.log(item)
				this.$refs.myPackagePopups.show({
					style: 'padding:50rpx;',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});
				
				
				
			},
			navTo(item) {
			    console.log(item)
				// 如果是公众号就弹出公众号二维码
				if (item.fixed_name == '关注公众号') {
					this.scanFn()
					return
				}
				// 进入后台
				if(item.fixed_name == '进入后台'){
					console.log('进入后台')
					uni.setClipboardData({
						data: item.url
					});
				}
				// 在线客服
				if(item.fixed_name =='在线客服'){
					console.log('在线客服')
					this.$sun.phone(item.url)
					// uni.setClipboardData({
					// 	data: item.url
					// });
				}
				// 推广海报
				if (item.fixed_name == '推广海报') {
					if(this.getConfig.distribution_level==0){
						// 
						this.$sun.toast('请开启分销','none')
					}else{
						this.scanFns()
						return
					}
				}
				
				 // 分销中心
				if (item.fixed_name == '分销中心') {
					console.log('分销中心')
					this.$sun.navRe('/pages/firstPage/firstPage', {
						currentIndex: 4
					})
					// 套餐卡
				} else if (item.fixed_name == '我的套餐卡') {
					this.$sun.navRe('/pages/firstPage/firstPage', {
						currentIndex: 3
					})
			
				}else if (item.fixed_name == '我的团队') {
					if(this.getConfig.distribution_level==0){
						// 
						this.$sun.toast('请开启分销','none')
						return
					}
                      this.$sun.navGo(item.url);
				 } else {
					this.$sun.navGo(item.url);
				}
			
			},
			scanFn() {
				this.$refs.myPackagePopup.show({
					style: '',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});
			},
			signFn() {
				// 跳转到签到页面
				this.$sun.navGo('/pages/signIn/signIn');
			},
			// 查看全部订单
			checkAllOrderFn(){
				
				this.$sun.navGo('/pages/orderManagement/orderManagement');
			},
			checkOrderFn(item){
				this.$sun.navGo('/pages/orderManagement/orderManagement',{
					currentIndex:item.index
				});
			}
			

		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;

	}
     .backgroundImg{
     	   
     	   width: 696rpx;
     	   height: 994rpx;
     	   background-repeat: no-repeat;
     	   background-size: contain;
     	  background-image: (var(--bg-image));
     	   position: relative;
     	   .qrcode{
     		   width: 245rpx;
     		   height: 245rpx;
     		   position: absolute;
     		   bottom: 224rpx;
     		   left: 230rpx;
     	   }
     }
	.gzhCard {
		background-repeat: no-repeat;
		padding: 80rpx;
		// background-color: #fff;
		background-size: contain;
		background-image: url('../../static/bg 1.png');
		height: 708rpx;
		width: 650rpx;

		.qrcode {
			margin: 20rpx 0;
			width: 251.02rpx;
			height: 251.2rpx;
		}
	}

	.headInformation {
		
		.signImg {
			position: fixed;
			width: 86.54rpx;
			height: 84rpx;
			right: 0;
			bottom: 10%;
		}
		.backgroundColor {
			width:750rpx;
			height: 524rpx;
			// position: absolute;
			// z-index: 9;
			// right: 20rpx;
			// top: 36rpx;
			background: #212121;
			background-repeat: no-repeat;
			background-size: cover;
			text-align: center;
			padding: 68rpx 26rpx 0;

			.headformation {
				margin-bottom: 32rpx;

				.avater {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
				}

				.memberType {
					/* 矩形 1043 */
					color: rgb(186, 128, 0);
					font-family: 思源黑体;
					font-size: 24rpx;
					font-weight: 400;
					border-radius: 12rpx;
					width: 112rpx;
					height: 36rpx;
					background-color: #FFDC8F;
				}

				.membershipCode {
					margin-right: 30rpx;

					.codeImage {
						width: 48rpx;
						height: 48rpx;
					}
					.rechargeImage {
						width: 58rpx;
						height: 58rpx;
					}
				}


				;
			}

			;

			// 我的订单
			.myOrderCard {


				.myOrder {
					padding-bottom: 25rpx;
					border-bottom: 2rpx solid rgb(237, 237, 237);
				}

				.avaterIcon {
					width: 76rpx;
					height: 76rpx;
					margin-bottom: 14rpx;
				}

				.infoBox {
					width: 25%;
					margin-bottom: 10rpx;
				}

				.rightContent {
					.authorizationTitle {
						color: #fff;
						font-size: 28rpx;
						font-weight: 400;
						margin-bottom: 11rpx;
					}

					.secondAuthorizationTitle {
						color: rgb(153, 153, 153);
						font-size: 24rpx;
						font-weight: 400;
						margin-bottom: 20rpx;
					}

					.moreToolTitle {
						color: #666666;
						font-size: 28rpx;
						font-weight: 600;
						margin-bottom: 11rpx;
					}

					.authorizationText {
						color: #666;
						font-family: Inter;
						font-size: 24rpx;
					}
				}
			}
		}

		.companyIcon {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}

		// 轮播图
		.carouselChart {
			margin-top: 20rpx;
		
			height: 188rpx;
			border-radius: 20rpx;
			// background: linear-gradient(102.41deg, rgb(245, 221, 158) 0.753%, rgb(255, 220, 143) 99.163%);


		}

		.indexBottomContianer {
			margin-top: -30rpx;

			border-radius: 40rpx;
			position: relative;

			background-color: #f6f6f6;

			.arrowUp {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: -20rpx;
			}

			// 我的订单
			.myOrderCard {
				width: 710rpx;

				border-radius: 20rpx;
				margin-top: 22rpx;
				background: rgb(255, 255, 255);
				padding: 24rpx 24rpx;

				.myOrderBorder {
					border-bottom: 2rpx solid rgb(237, 237, 237);
				}

				.myOrder {
					padding-bottom: 25rpx;


					.rectangle {
						width: 6rpx;
						height: 28rpx;
						background: rgb(217, 183, 118);
						display: inline-block;
						margin-right: 15rpx;
					}
				}

				.avaterIcon {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 14rpx;
				}

				.infoBox {
					width: 25%;
					margin-bottom: 10rpx;
				}

				.rightContent {
					.authorizationTitle {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						// font-weight: 600;
						margin-bottom: 20rpx;
					}

					.moreToolTitle {
						color: #666666;
						font-size: 28rpx;
						font-weight: 600;
						margin-bottom: 11rpx;
					}

					.authorizationText {
						color: #666;
						font-family: Inter;
						font-size: 24rpx;
					}
				}
			}

			;

			.dataDetails {
				margin-top: 28rpx;
				border-radius: 20rpx;
				background: rgb(255, 255, 255);
				width: 710rpx;
				height: 136rpx;
			}
		}

	}
</style>